<template>
  <div>
    <div class="post-comment">
      <div class="post-comment-input" @click="showPost">
        <i class="fa fa-pencil"></i>
        <span>留下你的短评～</span>
      </div>
      <view class="like-share">
        <Like :likeInfo="likeInfo" :artInfo="bookDetail"></Like>
        <Share></Share>
      </view>
    </div>
    <PostInput @cancelPostModal="isShowPost = false" v-if="isShowPost" :commentArr="commentArr" :artInfo="bookDetail"></PostInput>
  </div>
</template>

<script>
import Like from '../../../components/like/index'
import Share from '../../../components/share/index'
import PostInput from './postInput'
export default {
  data() {
    return {
      isShowPost: false
    }
  },
  components: { Like, Share, PostInput },
  props: ['likeInfo', 'bookDetail', 'commentArr'],
  methods: {
    showPost() {
      this.isShowPost = true
    }
  }
};
</script>

<style scoped>
.post-comment {
  position: fixed;
  bottom: 0;
  background-color: #fff;
  height: 90rpx;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-top: 1px solid #eee;
  font-size: 28rpx;
  color: #bbb;
}
.post-comment-input {
  border-radius: 20px;
  border: 1px solid #eee;
  width: 70%;
  text-align: center;
  line-height: 60rpx;
}
.fa-pencil {
  font-size: 24rpx;
  margin-right: 20rpx;
}
.like-share {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>